<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

    <script>
        $(function(){
            $("li").mouseover(function(){
                <%--$.ajax({--%>
                <%--    url:"${pageContext.request.contextPath}/show",--%>
                <%--    data:{"id":$(this).prop("id")},--%>
                <%--    success:function(user){--%>
                <%--        $("#id").html(user.id);--%>
                <%--        $("#username").html(user.username);--%>
                <%--        $("#password").html(user.password);--%>
                <%--        $("#phone").html(user.phone);--%>
                <%--        $("#address").html(user.address);--%>
                <%--    }--%>
                <%--});--%>


                $.getJSON("${pageContext.request.contextPath}/show",
                          {"id":$(this).prop("id")},
                          function(user){
                              $("#id").html(user.id);
                              $("#username").html(user.username);
                              $("#password").html(user.password);
                              $("#phone").html(user.phone);
                              $("#address").html(user.address);
                          });


            });
        });
    </script>

</head>
<body>
    <c:forEach items="${users}" var="user">
        <li id="${user.id}">${user.username}</li>
    </c:forEach>

    <hr/>

    <div id="data" style="background-color: #dddddd;width: 40%;padding: 8px;position: absolute;">
        编号：<span id="id"></span><br/>
        账号：<span id="username"></span><br/>
        密码：<span id="password"></span><br/>
        电话：<span id="phone"></span><br/>
        地址：<span id="address"></span><br/>
    </div>
</body>
</html>
